<script setup>
import { inspectionLicense } from "@/api/inspection/license-discern";
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";

const dataList = reactive({
  white: [],
  black: [],
});

async function getData() {
  const { data } = await inspectionLicense.read({ limit: 100, page: 1 });
  dataList.white = data.list;
}
getData();

const column = ref([
  { prop: "id", label: "编号", width: "80" },
  { prop: "licensePlate", label: "车牌号码" },
  { prop: "createTime", label: "记录时间" },
]);

const dialog = reactive({
  title: "设置",
  visible: false,
  form: {
    data: {
      value: "",
    },
  },
  async preservation() {
    dialog.visible = false;
    await inspectionLicense.create({ licensePlate: dialog.form.data.value });
    ElMessage({ type: "success", message: "保存成功" });
    getData();
  },
});
</script>

<template>
  <div class="h-full w-full flex">
    <div class="h-full w-full bg-[#162331] p-4 rounded">
      <div class="text-[#85939D] mb-4">白名单</div>
      <el-button class="mb-4" type="primary" @click="dialog.visible = true">
        手动录入
      </el-button>
      <el-table :data="dataList.white" size="large">
        <el-table-column
          v-for="item in column"
          :key="item.id"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        />
      </el-table>
    </div>
    <!-- <div class="h-full basis-1/2 bg-blue-400">
      <el-card class="w-full h-full">
        <template #header>
          <div class="flex justify-between items-center">
            <span>黑名单列表</span>
            <el-button text @click="dialog.visible = true">手动录入</el-button>
          </div>
        </template>
        <el-table :data="data.black">
          <el-table-column
            v-for="item in column"
            :key="item.id"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
          />
        </el-table>
      </el-card>
    </div> -->
  </div>

  <el-dialog v-model="dialog.visible" :title="dialog.title">
    <el-form :model="dialog.form.data" status-icon>
      <el-form-item label="车牌号">
        <el-input v-model="dialog.form.data.value" placeholder="车牌号" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialog.visible = false">取消</el-button>
        <el-button @click="dialog.preservation()">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-table__inner-wrapper::before) {
  height: 0;
}

:deep(th.el-table__cell) {
  background-color: #162331;
  color: #85939d;
}

:deep(.el-table__cell) {
  background-color: #162331;
  color: white;
}

:deep(td.el-table__cell),
:deep(th.el-table__cell.is-leaf) {
  border-bottom: 0;
}

:deep(tr:hover > td) {
  background-color: #162331 !important;
}
</style>
